<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!-- 表单标签 -->
<h1>表单标签</h1>
<p>表单标签用于收集用户输入的数据。</p>
<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required value="牛力" readonly><br/><br/>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required><br/><br/>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br/><br/>
    <label for="submit">提交:</label>
    <input type="submit" id="submit" value="提交"><br/><br/>
    <input type="reset" value="重置表单"/>
    <label>
        <input type="checkbox" name="subscribe" value="yes"> 订阅新闻邮件
    </label><br/><br/>
    <label>
        <input type="radio" name="radio" value="option1" checked> 选项1
    </label>
    <label>
        <input type="radio" name="radio" value="option2" disabled> 选项2
    </label><br/><br/>
    <label for="comments">评论:</label><br/>
    <textarea id="comments" name="comments" rows="4" cols="50" placeholder="在此输入您的评论..."></textarea><br/><br/>
    <label for="file">上传文件:</label>
    <input type="file" id="file" name="file"><br/><br/>
    <label for="select">选择一个选项:</label>
    <select id="select" name="select">
        <option value="option1">选项1</option>
        <option value="option2" selected>选项2</option>
        <option value="option3">选项3</option>
    </select><br/><br/>
    <label for="date">选择日期:</label>
    <input type="date" id="date" name="date"><br/><br/>
    <label for="time">选择时间:</label>
    <input type="time" id="time" name="time"><br/><br/>
    <label for="color">选择颜色:</label>
    <input type="color" id="color" name="color"><br/><br/>
    <label for="range">选择范围:</label>
    <input type="range" id="range" name="range" min="0" max="100" value="50"><br/><br/>
    <label for="number">输入数字:</label>
    <input type="number" id="number" name="number" min="1" max="10" step="1" value="5"><br/><br/>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="搜索..."><br/><br/>
    <label for="tel">电话号码:</label>
    <input type="tel" id="tel" name="tel" placeholder="123-456-7890"><br/><br/>
    <label for="url">网址:</label>
    <input type="url" id="url" name="url" placeholder="https://example.com"><br/><br/>
    <label for="hidden">隐藏字段:</label>
    <input type="hidden" id="hidden" name="hidden_name" value="hidden_value" ><br/><br/>
    <label for="diy" >正则表达式:</label>
    <input type="text" id="diy" name="diyemail" pattern = "^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ "><br/><br/>

</form>
<p>表单标签用于创建交互式表单，允许用户输入数据并提交。表单可以包含文本输入框、密码输入框、复选框、单选按钮


</body>
</html>